<template>
  <nav class="navbar navbar-expand-sm fixed-top">
    <div class="container-fluid">
      <div class="d-flex align-items-center justify-content-center">
        <div class="logo-container d-flex align-items-center">
          <router-link to="/" class="navbar-brand d-flex align-items-center">
            <img
              class="logo-image"
              src="@/assets/logo.png"
              alt="Logo"
              width="25%"
              height="25%"
            />
            <span class="logo-text ms-2">芸窗</span></router-link
          >
        </div>
      </div>
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navmenu"
      >
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navmenu">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item d-flex align-items-center">
            <!-- 切换黑夜模式 -->
            <div class="text-end">
              <input
                type="checkbox"
                name="checkbox"
                id="checkbox"
                :checked="isDarkMode"
                @change="toggleDarkMode"
              />
              <label for="checkbox" class="label" />
            </div>
          </li>
          <li class="nav-item">
            <router-link
              to="/issuehall"
              class="nav-link"
              active-class="active"
              exact
              >期刊大厅</router-link
            >
          </li>
          <li class="nav-item">
            <router-link
              to="/three"
              class="nav-link"
              active-class="active"
              exact
              >芸窗3D</router-link
            >
          </li>
          <li class="nav-item">
            <router-link
              to="/uploadManuscript"
              class="nav-link"
              active-class="active"
              exact
              >上传稿件</router-link
            >
          </li>

          <li class="nav-item">
            <router-link
              to="/updateMessage"
              class="nav-link"
              active-class="active"
              exact
              >修改信息</router-link
            >
          </li>
          <li class="nav-item">
            <router-link
              to="/login"
              class="nav-link"
              active-class="active"
              exact
              >登录/注册</router-link
            >
          </li>
        </ul>
      </div>
    </div>
  </nav>
</template>
<script setup>
import { L2Dwidget } from "live2d-widget";
import { ref, watchEffect } from "vue";
// 导入爱心动画
import "@/assets/javascript/HeartAnimation.js";
// 切换黑夜主题
const isDarkMode = ref(false);
function toggleDarkMode(event) {
  isDarkMode.value = event.target.checked;
  document.body.classList.toggle("dark-mode", isDarkMode.value);
}

// 监听状态变化并更新body类
watchEffect(() => {
  document.body.classList.toggle("dark-mode", isDarkMode.value);
});
// 3D人物插件
L2Dwidget.init({
  model: {
    jsonPath:
      "https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json",
    scale: 1,
    hHeadPos: 0.5,
    vHeadPos: 0.618,
  },
  dialog: {
    enable: true,
  },
  mobile: { show: true, scale: 0.5 },
  display: {
    superSample: 2,
    width: 200,
    height: 250,
    position: "right",
    hOffset: 0,
    vOffset: 0,
  },
});
</script>
<style scoped>
@import url("@/assets/css/common.css");
@import url("@/assets/fonts/font.css");
@import url("@/assets/css/dark.css");
nav {
  background-color: white;
  backdrop-filter: blur(8px); /* 背景模糊效果 */
  -webkit-backdrop-filter: blur(8px); /* 对于 Safari 和 Chrome */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.nav-item {
  padding-left: 2rem;
  padding-right: 2rem;
}
.logo-container {
  display: flex;
  align-items: center;
  max-width: calc(100vw / 6); /* logo 总体只占屏幕六分之一的宽度 */
  border-radius: 0.5rem;
  cursor: pointer;
  transition: box-shadow 0.5s ease-in-out;
}

.logo-image {
  display: block; /* 图片部分 */
}

@media (max-width: 575.98px) {
  .logo-image {
    display: none; /* 当屏幕小于 576px 时隐藏图片 */
  }
  .logo-text {
    font-size: calc(2rem * (100vw / 550)); /* 文字大小随屏幕宽度变化 */
  }
}
.logo-text,
.logo-text:hover,
.logo-text:focus {
  font-size: 2rem;
  line-height: 1;
  margin-left: 0.5em;
  white-space: nowrap; /* 放置文字换行 */
  color: var(--jiqiu-color);
  font-family: "ChongXiSmallSeal";
}
.logo-container:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* 黑夜模式按钮 */
label {
  height: 30px;
  width: 70px;
  background-color: #ffffff;
  border-radius: 30px;
  -webkit-box-shadow: inset 0 0 5px 4px rgba(255, 255, 255, 1),
    inset 0 0 20px 1px rgba(0, 0, 0, 0.488), 10px 20px 30px rgba(0, 0, 0, 0.096),
    inset 0 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 5px 4px rgba(255, 255, 255, 1),
    inset 0 0 20px 1px rgba(0, 0, 0, 0.488), 10px 20px 30px rgba(0, 0, 0, 0.096),
    inset 0 0 0 3px rgba(0, 0, 0, 0.3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  -webkit-transition: -webkit-transform 0.4s;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
}

.label:hover {
  -webkit-transform: perspective(100px) rotateX(5deg) rotateY(-5deg);
  transform: perspective(100px) rotateX(5deg) rotateY(-5deg);
}

#checkbox:checked ~ .label:hover {
  -webkit-transform: perspective(100px) rotateX(-5deg) rotateY(5deg);
  transform: perspective(100px) rotateX(-5deg) rotateY(5deg);
}

#checkbox {
  display: none;
}

#checkbox:checked ~ .label::before {
  left: 40px;
  background-color: #000000;
  background-image: linear-gradient(315deg, #000000 0%, #414141 70%);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.label::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: #000000;
  background-image: linear-gradient(
    130deg,
    #757272 10%,
    #ffffff 11%,
    #726f6f 62%
  );
  left: 10px;
  -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3),
    10px 10px 10px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3), 10px 10px 10px rgba(0, 0, 0, 0.3);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
</style>